<template>
  <div v-show="dialogValue" class="user1-add f-c">
    <BackPage title="绩效考核详情" show-back @back="onPageBack" />
    <div class="user1-add-box f-g">
      <TitleBox title="基本信息" />
      <div style="margin: 36px 0" class="c-table">
        <table>
          <tr>
            <td class="bg-td">
              人员姓名
            </td>
            <td>{{ currentDetail.realename }}</td>
            <td class="bg-td">
              服务项目数
            </td>
            <td>{{ currentDetail.projectNumber }} </td>
          </tr>
          <tr>
            <td class="bg-td">
              人员类型
            </td>
            <td>
              {{ currentDetail.roleTypeName }}
            </td>
            <td class="bg-td">
              用户满意度评价数
            </td>
            <td>{{ currentDetail.scoreNumber }} </td>
          </tr>
          <tr>
            <td class="bg-td">
              平均用户满意度
            </td>
            <td>
              <el-rate
                :value="currentDetail.score"
                disabled
                :max="5"
                show-score
                text-color="#ff9900"
                score-template="{value}"
              />
            </td>

            <td class="bg-td">
              总分
            </td>
            <td>
              <div class="f-r j-b a-c">
                <span>{{ currentDetail.completion }}</span>
                <el-button type="text" @click="onScoreDetail">查看详情></el-button>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <TitleBox title="用户评价" />
      <div v-for="(item,index) in projectData" :key="index" class="box">
        <div class="f-r a-c">
          <div class="box-item">
            项目名称：{{ item.projectName }}
          </div>
          <div class="box-item">
            服务类型：{{ item.evTypeName }}
          </div>
        </div>
        <div class="box-item f-r a-c">
          <span>满意度：</span>
          <el-rate
            :value="item.satisfaction"
            disabled
            :max="5"
            show-score
            text-color="#ff9900"
            score-template="{value}"
          />
        </div>
        <div class="box-item">评价内容：</div>
        <div class="box-item">{{ item.content }}</div>
      </div>
    </div>
    <el-dialog
      title="分数详情"
      :visible.sync="scoreDialog"
      width="1089px"
      append-to-body
    >
      <ScoreDetail v-if="scoreDialog" :score="currentDetail.completion" :user-id="currentDetail.zdUserId" />
    </el-dialog>
  </div>
</template>

<script>
import { http_performance } from '@/api'
import ScoreDetail from './score-detail'
export default {
  name: 'User1Add',
  components: {
    ScoreDetail
  },
  data() {
    return {
      dialogValue: false,
      options: [
        { value: 0, name: '代办人员' },
        { value: 1, name: '窗口人员' }
      ],
      options2: [
        { value: 1, name: '外线联保' },
        { value: 2, name: '计划变更' }
      ],
      currentDetail: {},
      projectData: [],
      searchParams: {
        timeValue: []
      },
      scoreDialog: false
    }
  },
  methods: {
    open(item) {
      this.currentDetail = item
      http_performance.read({ id: item.id }).then(res => {
        res.data = res.data || {}
        this.currentDetail = res.data
        this.currentDetail.roleTypeName = this.options.find(item => item.value == this.currentDetail.roleType)?.name
        this.projectData = (res.data.comments || []).map(el => {
          return {
            ...el,
            evTypeName: this.options2.find(item => item.value == el.evType)?.name
          }
        })
      })
      this.dialogValue = true
    },
    onPageBack() {
      this.dialogValue = false
    },
    onScoreDetail() {
      this.scoreDialog = true
    },
    onSaveClose() {

    }
  }
}
</script>

<style scoped lang="scss">
.user1-add {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #F6F6F6;
}
.user1-add-box {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(185, 185, 185, .3);
  border-radius: 16px;
  padding: 60px;
}
.process {
  margin: 36px 0px;
  width: 955px;
  border-radius: 31px 31px 31px 31px;
  opacity: 1;
  border: 1px solid #C2C2C2;
  padding: 36px 20px;
  .textarea {
    overflow: auto;
    padding: 34px 0;
    padding-bottom: 100px;
    position: relative;
    .button-list {
      position: absolute;
      right: 34px;
      bottom: 34px;
    }
  }
  .message-list {
    overflow: auto;
    border-bottom: 1px solid #E8E8E8;
  }
  .message-item {
    margin-bottom: 40px;
    .name {
      color: #0A1629;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 5px;
    }
    .desc {
      width: 616px;
      border-radius: 15px 15px 15px 15px;
      border: 1px solid #707070;
      padding: 10px 20px;
      .desc-content {
        color: #7D8592;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 30px;
      }
      .desc-time {
        color: #7D8592;
        font-size: 14px;
        line-height: 14px;
      }
    }
  }
  .message-item2 {
    overflow: hidden;
    .name {
      text-align: right;
      color: #333333;
    }
    .desc {
      background-color: #3F8CFF;
      border: none;
      .desc-content {
        color: #ffffff;
      }
      .file {
        .file-name {
          color: #C2C2C2;
          font-size: 14x;
          line-height: 14px;
        }
      }
      .desc-time {
        color: #ffffff;
      }
    }
  }
}
.box {
  margin: 36px 0px;
  width: 100%;
  background: #F5FAFD;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
  border: 1px solid #E4E5E7;
  padding: 24px 18px;
  padding-bottom: 8px;
  font-size: 16px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #333333;
  .box-item {
    margin-bottom: 15px;
    margin-right: 30px;
  }
}
</style>
